<template>
  <div id="SamstoFridge">
    <breadcrumb content="专家评语模板" />
    <div class="bodyContent">
      <Splitpanes class="area" click>
        <Pane size="50">
          <el-tabs type="border-card">
            <el-tab-pane label="专家评语模板">
              <BacDiagnosTempDescList
                ref="bacDiagnosTempDescListRef" :currentRow="curSelectRow"
                :descType="descType"
                @findList="findList"
                @clickCell="clickCell"
                @addCell="addMethod"
              />
            </el-tab-pane>
          </el-tabs>
        </Pane>

        <Pane size="50">
          <div class="bankContent">
            <el-tabs type="border-card" v-model="activeName">
              <el-tab-pane label="基本信息" name="infoForm"  >
                <BacDiagnosTempDescForm ref="bacDiagnosTempDescFormRef"
                                        :currentRow="curSelectRow"
                                        :descType="descType"
                                        @findList="findList" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted, watch } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '@/stores/store';
import BacDiagnosTempDescForm from "./BacDiagnosTempDescForm.vue";
import BacDiagnosTempDescList from "./BacDiagnosTempDescList.vue";
import {  IsEmpty } from '@/utils/common';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
const curSelectRow = ref({});
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
const descType = ref('xjpyzjpy');
// 右侧表单:
const bacDiagnosTempDescListRef = ref<InstanceType<typeof BacDiagnosTempDescList>>(); //基本信息表单标记ref
const bacDiagnosTempDescFormRef = ref<InstanceType<typeof BacDiagnosTempDescForm>>(); //基本信息表单标记ref
const activeName = ref('infoForm');
const infoTabPaneDisabled = ref(true);

watch(curSelectRow, (newValue, oldValue) => {
  if (!IsEmpty(newValue.id)){
    isPageDisabled.value=false;
    infoTabPaneDisabled.value=false;
  }else{
    activeName.value="infoList";
    isPageDisabled.value=true;
    infoTabPaneDisabled.value=true;
  }
});
// 方法定义区 =============
onMounted(() => {
});
// 表格选中当前行
function clickCell({ row }: any) {
  curSelectRow.value = row;
  selectItemRows(curSelectRow.value);
}
function findList(){
  bacDiagnosTempDescListRef.value?.initPage();
}
// 新增
async function addMethod() {
  activeName.value="infoForm";
  bacDiagnosTempDescFormRef.value?.addNew();
}
//选中行后传值给FORM
async function selectItemRows(row) {
  let selectItem=row;
  bacDiagnosTempDescListRef.value?.initPage(selectItem);
}
</script>
<style lang="scss" scoped>
#SamstoFridge {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding:0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding:15px;
            height:calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent{
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
</style>

